<template>
		<el-row>
			<el-col :span="24">
				<el-form :inline="true" :model="state.query">
					<el-form-item label="项目编号">
						<el-input clearable v-model="state.query.code" placeholder="项目编号" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="init">搜索</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-tabs v-model="state.activeName"  @tab-change="handleClick">
					<el-tab-pane v-for="(item,index) in state.labelList" :label="item" :name="index">
						<el-table v-loading="loading" :data="state.ProjectList" border style="width: 100%">
							<el-table-column prop="id" label="序号" align="center" width="60"/>
							<el-table-column prop="code" label="外部编号" align="center" width="160"/>
							<el-table-column prop="projectName" label="项目名称" align="center" width="300" />
							<el-table-column prop="projectType" label="项目类型" align="center" width="90" >
								<template #default="props">
									<span  v-if="props.row.projectType === 0" style="color: green">自营</span>
									<span  v-else-if="props.row.projectType === 1" style="color: #07f89a">三方</span>
									<span v-else>未知进度</span>
								</template>
							</el-table-column>
							<el-table-column prop="status" label="项目进度" align="center" width="120">
								<template #default="props">
									<el-tag type="primary">{{ state.statusMap[props.row.status] || '未知进度' }}</el-tag>
								</template>
							</el-table-column>

							<el-table-column prop="amount" label="总金额" align="center"  width="120" />
							<el-table-column prop="deposit" label="定金" align="center"  width="120" />
							<el-table-column prop="deliveryTime" label="交付日期" align="center" width="138">
								<template #default="props">
									{{ props.row.deliveryTime === null ? '-' : props.row.deliveryTime }}
								</template>
							</el-table-column>
							<el-table-column prop="createTime" label="提交时间" align="center" width="180"/>
							<el-table-column label="详情操作" align="center">
								<template #default="props">
<!--									<el-button-->
<!--										v-if="props.row.status === 0"-->
<!--										link type="primary"-->
<!--										size="small"-->
<!--										@click="completion(props.row)">补全项目</el-button>-->
<!--									<el-button v-if="props.row.status === 1" link type="primary" size="small" @click="completion(props.row)">修改内容</el-button>-->

									<el-button link type="primary" size="small" @click="to(props.row)">详情</el-button>
									<el-button v-if="state.activeName == 0" link type="primary" size="small" @click="startDevelop(props.row.id)">开始开发</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
				</el-tabs>
			</el-col>
		</el-row>
		<div class="pagination-container">
			<el-pagination
				:page-size="state.pageValidate.pageSize"
				layout="prev, pager, next"
				:total="state.pageValidate.total"
				@current-change="handleCurrentChange"
			/>
		</div>
<!--		<ProjectDocComponents-->
<!--			:visible=state.infoDialogVisible-->
<!--			:user-info=state.userInfo-->
<!--			:project-info=state.projectInfo-->
<!--			@close-dialog="state.infoDialogVisible = false"-->
<!--		/>-->
</template>
<script setup lang="ts">
import type {TabPaneName} from 'element-plus'
import {useRouter} from 'vue-router';
import { addDevelop } from '~/api/project'
const router = useRouter();
const loading = ref(true)
const state = reactive(<any>{
	statusMap: {
		0: '未开发',
		1: '正在开发',
		2: '待交付',
		3: '已完成',
		4: '已退回'
	},
	path:"",
	DomenetFrom:{},
	viewDialogVisible:false,
	domenentDialogVisible:false,
	infoDialogVisible: false,
	manualInputdialogVisible:false,
	palyForm:{},
	activeName:0,
	labelList:["未开发","开发中","待交付","已完成","已退回"],
	manualDialogVisible: false,
	completionDialogVisible: false,
	pageValidate: {
		pageNo: 1,
		pageSize: 8,
		total: 0
	},
	query: {
		status: 0,
		code:""
	},
	ProjectList: [],
	updateFrom: {
		id: '',
		nickName: '',
		cellPhone: '',
		// imageUrl: '',
		status: '',
		roleType: ''
	},
	userInfo:{},
	projectInfo:{},
	completionForm:{},
	userList:[],
	orderList:[],
	manualFrom:{
		isPayment:"3"
	},

})

//标签页点击
const handleClick = (name: TabPaneName) => {
	state.query.status = name
	init()
}
/**
 * 详情信息
 */
const to = (row:any) => {
	router.push(`/project/${row.id}`)
}

/**
 * 补全项目
 */
const completion = (row:any) => {
	console.log(row)
	state.completionDialogVisible = true
	state.userInfo = row.adminCusUserVo
	state.completionForm = row
	state.completionForm.projectType = row.projectType.toString()
	delete state.completionForm.userInfo
	delete state.completionForm.proProjectDocsList
	delete state.completionForm.providerId
}

/**
 * 初始化
 */
function init() {



	state.ProjectList = []
	loading.value = true
	http.post('/api/admin/project/page', {
		  status: state.query.status,
			pageValidate:  state.pageValidate
	}).then((res: any) => {
		state.ProjectList = res.data.lists
		state.pageValidate.pageNo = res.data.pageNo
		state.pageValidate.pageSize = res.data.pageSize
		state.pageValidate.total = res.data.count

		loading.value = false
	})
}


/**
 * 分页
 * @param val
 */
const handleCurrentChange = (val: number) => {
	state.pageValidate.pageNo = val
	init()
}

/**
 * 开始开发
 */
const startDevelop = (id:number) => {
	addDevelop({id:id,status:1}).then(() =>{
		toast.success("修改成功！")
		init()
	})
}

init()

</script>
<style scoped>

:deep(.el-form-item__content) {
	width: 150px;
}

.pagination-container {
	display: flex;
	justify-content: center;
	margin-top: 20px; /* 可根据需要调整外边距 */
}

:deep(.el-dialog){
	background-color: #ebf0f9;
}

:deep(.avatar-uploader .el-upload) {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
	border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>
